<template>
    <div>
        <el-dialog :title="seckInfo.isAdd ? '添加秒杀' : '编辑秒杀'" :visible.sync="seckInfo.isShow" :before-close="cancel">
            <el-form :model="seckFrom" :rules="rules" ref="seckRef">
                <el-form-item label="活动名称" :label-width="formLabelWidth" prop="title">
                    <el-input v-model="seckFrom.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="活动期限" :label-width="formLabelWidth">
                    <el-date-picker v-model="seckFrom.begintime " type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="一级分类" :label-width="formLabelWidth" prop="first_cateid">
                    <el-select v-model="seckFrom.first_cateid" @change="changeCate(false)">
                        <el-option v-for="item in catelist" :key="item.id" :label="item.catename"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品" :label-width="formLabelWidth" prop="second_cateid">
                    <el-select v-model="seckFrom.second_cateid">
                        <el-option v-for="item in cateArr" :key="item.id" :label="item.catename"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="seckFrom.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { seckAdd, seckInfo, seckEdit } from '../../request/api'
import { mapGetters, mapActions } from 'vuex'
export default {
    props: ['seckInfo'],
    data() {
        return {
            formLabelWidth: '120px',
            seckFrom: {
                title: '',           //限时秒杀名称
                begintime: '',       //开始时间
                endtime: '',         //结束时间
                first_cateid: '',    //商品一级分类编号
                second_cateid: '',   //商品二级分类编号
                goodsid: '',         //商品编号
                status: 1            //状态   1正常2禁用
            },
            rules: {
                title: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ],
            },
            cateArr: [],  //二级分类
            value1: '',
        }
    },
    methods: {
        ...mapActions({
            getCate: 'cate/getCateListAction',
            getSeck: 'seck/getSevkListAction'
        }),
        // 数据回显
        lookup(id) {
            seckInfo({ id }).then(res => {
                this.seckFrom = res.list
                this.seckFrom.id = id
            })
        },
        // 封装一个一级分类切换事件，用于获取当前状态值
        changeCate(n) {
            // 知道当前id 拿id去数组中进行查找。找到所在下标 获得当前数组下标下的children
            let index = this.catelist.findIndex(item => item.id === this.seckFrom.first_cateid)
            // console.log(index);
            this.cateArr = this.catelist[index].children
            // console.log(this.cateArr);
            // 清空二级分类双向数据绑定值
            if (!n) {
                this.seckFrom.second_cateid = ''
            }

        },
        // 清空事件
        reset() {
            this.seckFrom = {
                title: '',           //限时秒杀名称
                begintime: '',       //开始时间
                endtime: '',         //结束时间
                first_cateid: '',    //商品一级分类编号
                second_cateid: '',   //商品二级分类编号
                goodsid: '',         //商品编号
                status: 1            //状态   1正常2禁用
            }
        },
        cancel() {
            this.$emit('cancel', false)
            this.reset()
        },
        // 确定事件
        confirm() {
            this.$refs.seckRef.validate(val => {
                if (val) {
                    if (this.seckInfo.isAdd) {
                        seckAdd(this.seckFrom).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                this.cancel()
                                this.getSeck()
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    } else {
                        seckEdit(this.seckFrom).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                this.cancel()
                                this.getSeck()
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    }
                }
            })
        }
    },
    mounted() {
        this.getCate()
    },
    watch: {},
    computed: {
        ...mapGetters({
            catelist: 'cate/getCateList'
        })
    },
    filters: {},
    components: {}
}
</script>
<style scoped></style>